<style lang="scss" scoped>
@import "../../css/list.scss";
.exchange {
  header {
    .add_site {
      border-bottom: 2px dashed #ddd;
      height: 0.9rem;
    }
    .site {
      height: 0.5rem;
      line-height: 0.5rem;
    }
  }

  footer {
    width: 100%;
    box-sizing: border-box;
    height: 0.65rem;
    padding: 0.08rem 0.15rem;
    bottom: 0;
    left: 0;
  }
}
</style>

<template>
  <div class="exchange">
    <header class="bgfff">
      <div class="add_site padding-lr15 flex-col flex-middle" @click="toRouter('site_list')">
        <div class="box1" v-show="!hasSite">请添加收货地址</div>
        <div class="box1" v-show="hasSite">
          <div class="padding-b10">{{site.name}}
            <span class="margin-l10">{{site.tel}}</span>
          </div>
          <div class="ellipsis">{{site.provinceName}} {{site.cityName}} {{site.districtName}} {{site.detailed}}</div>
        </div>
        <i class="iconfont icon-jiantou font-16"></i>
      </div>
      <div class="site padding-lr15">智能屋</div>
    </header>
    <main>
      <div class="commodity bgfff margin-tb10 padding-15 flex-col">
        <div class="img-bg commodity_img" :style="{backgroudIm:`url(${imgurl})`}"></div>
        <div class="box1 padding-l15 flex-row">
          <div class="box1 flex-col flex-middle">{{commodityInfo.commodityName}}</div>
          <div class="flex-col box1 flex-middle">
            <div class="box1 c82">
              <span class="cred">{{commodityInfo.commodityPrice}}</span>积分
            </div>
            <span>*{{commodityInfo.number}}</span>
          </div>
        </div>
      </div>
      <ul class="price padding-lr15 bgfff">
        <li class="flex-col border-b">
          <div class="box1">运费：</div>
          <span class="cred">￥{{commodityInfo.sendPrice}}</span>
        </li>
        <li class="flex-col border-b">
          <div class="">买家留言：</div>
          <input type="text" placeholder="选填" v-model="msg" class="box1">
        </li>
        <li class="flex-col flex-right">
          共{{commodityInfo.number}}件商品 &nbsp;&nbsp;合计
          <span class="cred">{{commodityInfo.number*commodityInfo.commodityPrice}}</span>积分
        </li>
      </ul>
    </main>
    <footer class="position-f bgfff">
      <div class="bgred cfff bor-r full box-center" @click="confirmExchange">确认兑换</div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "exchange",
  data() {
    return {
      imgurl: "",
      commodityInfo: {},
      hasSite: false,
      site: {}, //收货地址
      msg: "" // 留言
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.commodityInfo = that.getCache("exchange"); // 获取商品信息
      let setSite = that.getCache("sendSite");
      if (setSite) {
        that.site = setSite;
        that.hasSite = true;
      }
    });
  },
  methods: {
    /**
     * 确认兑换
     *
     */
    confirmExchange() {
      let that = this,
        ops = this.commodityInfo,
        site = this.site;

      let setSite = that.getCache("sendSite");
      if (!setSite) {
        this.layer('全选择收获地址','m');
        return;
      }

      this.http
        .post("order/save", {
          commodityCode: ops.commodityCode,
          imgurl: that.imgurl,
          commodityName: ops.commodityName,
          commodityNumber: ops.number,
          contact: site.name,
          phone: site.tel,
          orderAddress: `${site.provinceName} ${site.cityName} ${site.districtName} ${
            site.detailed
          }`,
          orderSendPrice: ops.sendPrice,
          orderPrice: ops.number * ops.commodityPrice,
          buyerMassage: that.msg
        })
        .then(res => {

          that.$store.commit('exchange_ok',true);
          
          ops['msg'] = that.msg;// 保存用户留言
          that.setCache('exchange',ops);
          that.$router.push({
            path: "/ok_exchange",
            query: {
              id: res.data,
              time: new Date().getTime()
            },
            meat: {
              title: "兑换成功"
            }
          });
          // that.removeCache("sendSite");
          // that.removeCache("exchange");
        })
        .catch(err => {});
    },
    /**
     * 获取默认收获地址
     */
    getSite() {
      let that = this;
      that.http
        .get("address/info", {
          isdefault: 0
        })
        .then(res => {
          if (res.data.id) {
            that.site = res.data;
          } else {
          }
        })
        .catch(err => {});
    }
  }
};
</script>


